/**
 * @功能描述: 容器组件样式，采用网格布局分成header footer aside main四部分
 * @author: lzn
 * @date: 2022-09-29 17:04:46
 * @version: 1.0
 */
@import '../../style/index.scss';

$container-header-height: 100px;
$container-footer-height: 100px;

// 容器组件布局
@include b(container) {
  display: grid;
  height: 100%;
  grid-template-rows: $container-header-height auto $container-header-height;
  grid-template-columns: repeat(3, 1fr);
}

// 定义header所属栅格
@include b(header) {
  grid-area: 1/1/2/4;
}

// 定义aside所属栅格
@include b(aside) {
  grid-area: 2/1/3/2;
}

// 定义main所属栅格
@include b(main) {
  grid-column: span 2;
  grid-row: 2/3;
}

// 定义footer所属栅格
@include b(footer) {
  grid-area: 3/1/4/4;
}